<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn"  uri="http://java.sun.com/jsp/jstl/functions" %>
<%@taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<c:set var="ctx"><%=request.getContextPath()%></c:set>  
<!DOCTYPE html>
<!-- saved from url=(0063)http://m.olexon.cn/order/quickOrder.html?productID=43&gzid=os13 -->
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>快速下单</title>
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-touch-fullscreen" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 
		<meta name="format-detection" content="telephone=no">
		<meta name="format-detection" content="email=no">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<link rel="stylesheet" href="${ctx}/styles/bootstrap/css/bt.min.css?v=201407199" type="text/css" charset="utf-8"/>
		<link rel="stylesheet" href="${ctx}/styles/bootstrap/css/btextends.css?v=20140800881491" type="text/css" charset="utf-8"/>
		<link rel="stylesheet" href="${ctx}/styles/back/wei-min.css" type="text/css" charset="utf-8"/>
		<script src="${ctx}/js/jquery1.9.1.js"></script>
		<script src="${ctx}/js/wei-min.js?v=_1014082011"></script> 
		<script>
			window._ctx = "${ctx}";
		</script>
		
		<style>
			.gray-bg{
				background:#dfdfdf;
			}
			
			header {
			    margin: 0 auto;
			    padding: 0;
			    width: 100%;
			    position: relative;
			    text-align: center;
			    line-height: 40px;
			    height: 40px;
			    background: #000;
			    color: #fff;
			    white-space: nowrap;
			    overflow: hidden;
			    border-top: 1px solid #333;
			    max-width: 640px;
	    		min-width: 320px;
    		}
    		
    		.container{
    			width:100%;
   			 	max-width: 640px;
	    		min-width: 320px;
	    		background: #fff;
    		}
    		
    		.label-2{
    			color:#000;line-height: 30px;padding-right:0px;width:59px;line-height: 39px;
    		}	
    		
    		.label-content{
    			font-size:16px;
    			font-weight: 800;
    			color:red;
    			line-height: 39px;
    		}
    		
    		.w-color{
    			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.29);
    			padding-top:15px;
    			padding-bottom:15px;
    			margin-left:-15px;
    			margin-right:-15px;
    		}
    		
    		.pordIxzj
			 {
				position: absolute;
				bottom: 1px;
				right: 1px;
				z-index: 50;
			}
			
			.colorlist .current{
			border:1px solid #ff5500;
			outline: 1px solid #ff5500;   
		}
		
		.colorlist button.current{
			border:1px solid #ff5500;
		}
		
		.color-img{
			border:1px solid #eee;
			width: 80px;
			outline: 1px solid #fff;
		}
		
		.color-img:hover{ 
			border:1px solid #ff5500;
			outline: 1px solid #ff5500;
		}
		
		.colorlist button:hover{
			border:1px solid #ff5500;
		}
		
		.olexon-prod-buy-btn {
    -webkit-transform: translateZ(0);
    left: 0;
    bottom: 0;
    z-index: 999;
    width: 100%;
    display: block;
}

.olexon-prod-buy-btn p {
    position: relative;
    max-width: 640px;
    min-width: 320px;
    width: 100%;
    margin: 0 auto;
    background-color: #fff;
    border-top: 3px solid #868686;
    padding: 5px 10px;
}

.left {
    float: left !important;
}

.olexon-prod-buy-btn p span {
    display: inline-block;
    font-size: 14px;
    line-height: 14px;
    margin-top: 5px;
}

.mr10 {
    margin-right: 10px;
}

.olexon-prod-buy-btn .btn-buy {
    background-color: #bb0605;
    background: -webkit-gradient(linear,0 0,0 100%,from(#bb0605),to(#bb0605));
    background: -moz-gradient(linear,0 0,0 100%,from(#bb0605),to(#bb0605));
    background: -o-gradient(linear,0 0,0 100%,from(#bb0605),to(#bb0605));
    border: #bb0605 1px solid!important;
    text-decoration: none;
}

.olexon-prod-buy-btn .btn-buy, .olexon-prod-buy-btn .btn-car {
    display: inline-block;
    color: #fff;
    width: 112px;
    height: 50px;
    text-align: center;
    font-size: 16px;
    line-height: 50px;
    border-radius: 2px;
}

.right {
    float: right !important;
}

.olexon-prod-buy-btn p span b {
    font-size: 22px;
    color: #900;
    margin-top: 15px;
}

.group{
			margin-top:4px;
		}
		
		.group  .not{
			color: #CDCDCD;
			border:1px dashed #ccc!important;
		}
		
	 
		
		.group .not-img{
			color: #CDCDCD;
			border:2px dashed #ccc!important;
		}
    		
		</style>
	</head>
	
	<body class="gray-bg"> 
		<header> 
		<a href="javascript:history.go(-1);">
			<span class="glyphicon glyphicon-chevron-left" style="float:left;line-height: 40px;font-size:16px;margin-left:5px;color:#fff;"></span>
		</a>  
			
		    <div style="text-align: center;display: inline-block;font-size:16px;font-weight: bold;">耐克官方旗舰店</div>  
  		</header>
  		<div style="text-align:center;">
  			<img src="${ctx}/images/lastday.jpg" style="max-width:100%;"/>
  		</div>
  		
		<div class="container"  >
				
				<div class="row">
					<div>
		    			<div class="col-md-2 col-xs-3 label-2">商品：</div>
		    				
		    			<div class="col-md-10 col-xs-9 colorlist label-content" style="line-height:24px;" id="info_id">
		    				 
		    			</div>
	    			</div>
	    			
	    		</div>
	    		
	    		<div class="row">
	    			<div>
		    			<div class="col-md-2 col-xs-3 label-2">价格：</div>
		    				
		    			<div class="col-md-10 col-xs-9 colorlist label-content"  id="now_price_id">
		    				 
		    			</div>
	    			</div>
	    		</div>
	    		
				<div class="row ">
	    			<div class="col-md-2 col-xs-3" style="color:#000;line-height: 30px;padding-right:0px;width:59px;">
	    				<div style="margin-top:5px;">
	    					颜色：
	    				</div>
	    				
	    			</div>  
	    			
	    			<div class="col-md-10 col-xs-9 colorlist" style="color:#333;padding-left: 0px;">
	    			 <div class="btn-toolbar" role="toolbar" style="line-height:26px;" id="color_div_id">
	    			    <!-- 文字颜色 -->
				        <div class="btn-group btn-group-sm group" id="color_model_id" style="display: none;position: relative;">
		          			<button type="button" class="btn btn-default color-button"></button>
			          		<img src="${ctx }/images/imgxuanzhongjiao.png" class="pordIxzj" style="display: none;"> 
				        </div>    
				        
				        <!-- 图片颜色 -->
				        <div class="btn-group btn-group-sm group" id="color_img_model_id" style="display: none;position: relative;margin-top:5;">
		          			<a class="color-img-a"> 
	    						<img src="" class="color-img" style="cursor: pointer;">
	    						<div class="not-div" style="height:62px; position: absolute;left:0px;top:0px;z-index: 100px;cursor: not-allowed;background-image: url('${ctx}/images/colorimg.gif');display:none;"></div> 
    					  	</a>
			          		<img src="${ctx }/images/imgxuanzhongjiao.png" class="pordIxzj" style="display: none;"> 
				        </div>
				        
				       </div>
	    			</div>
	    		</div>
		    		
	    		<div class="row" style="margin-top:10px;">
		    			<div class="col-md-2 col-xs-3" style="color:#000;line-height: 30px;margin-top:5px;padding-right:0px;width:59px;">尺码：</div>
		    			
		    			<div class="col-md-10 col-xs-9 colorlist" style="color:#333;padding-left: 0px;">
		    			 <div class="btn-toolbar" role="toolbar" style="line-height:26px;" id="size_div_id">
					        <div class="btn-group btn-group-sm group" id="size_model_id" style="display: none;margin-top:5px;">
					          <button type="button" class="btn btn-default" style="border-radius:0;"></button>
					          <img src="${ctx }/images/imgxuanzhongjiao.png" class="pordIxzj" style="display: none;"> 
					        </div>
					      </div>
		    			</div>
		    		</div>
				
				<form class="form-horizontal" role="form" id="addr_form" style="margin-top:15px;">
					<!-- begin 隐藏域 -->
					<input type="hidden" name="info" id="info_info_id" value="品牌男鞋"/>
					<input type="hidden" value="1" name="num" id=""/>  
					<input type="hidden" name="goodsId" value="" id="goodsId"/> 
					<input type="hidden" name="color" id="color_id"/>    	
					<input type="hidden" name="size" id="size_id"/>
					<input type="hidden" name="host" id="host_id"/>
					<!-- end 隐藏域 -->
  					 <div id="add_div">
					  <div class="form-group">
					    <label for="inputEmail3" class="col-sm-2 control-label">您的姓名：</label>
					    <div class="col-sm-10 col-md-10">
					      <input type="text" name="name" class="form-control useTitle required validate-chinese min-length-2 max-length-8" required-title="请输入收件人" validate-chinese-title="请输入您真实的姓名" min-length-title="请输入您真实的姓名" max-length-title="请输入您真实的姓名">
					    </div>
					  </div>
					  
					  <div class="form-group">
					    <label for="" class="col-sm-2 col-md-2 control-label">您的手机：</label>
					    <div class="col-sm-10 col-md-10">
						  	<input type="text" name="mobile" id="mobile_id" required-title="请输入手机号码" validate-mobile-phone-title="手机号码不正确" class="form-control useTitle required validate-mobile-phone">
						  	<div class="validation-advice" id="advice-mobile" style="display: none;"></div>
					    </div>
					     
					  </div>
					    <div class="form-group">
						    <label for="inputPassword3" class="col-sm-2 col-md-2 control-label">所在地区：</label>
						   
						    <div class="col-sm-10 col-md-10">
							  <div class="col-xs-4 col-sm-4" style="padding-left:0px;">
							  	<select class="form-control required" name="province" id="province_sel">
							  		<option value="">请选择</option> 
							  	</select>
							  	
							  </div>
							  <div class="col-xs-4 col-sm-4" style="padding-left:0px;">
							    <select class="form-control required" name="city" id="city_sel">
							  		<option value="">请选择</option>
							  	</select>
							  </div>
							  <div class="col-xs-4 col-sm-4" style="padding-left:0px;padding-right:0;">
							    <select class="form-control required" name="area" id="area_sel">
							  		<option value="">请选择</option>
							  	</select>
							  </div>
							</div>
						  </div>
					  
					  <div class="form-group">
					    <label for="" class="col-sm-2 col-md-2 control-label">详细地址：</label>
					    <div class="col-sm-10 col-md-10">
					      <input type="text" name="street" id="" class="form-control required  min-length-6 max-length-120 useTitle" required-title="请填写详细地址" min-length-title="请填写详细地址" max-length="不能超过120个字符" > 
					    </div>
					  </div>
					  
					  <div class="form-group">
					    <label for="" class="col-sm-2 col-md-2 control-label">订单备注：</label>
					    <div class="col-sm-10 col-md-10">
					      <input type="text" name="remark" id="" class="form-control  max-length-120 useTitle"  max-length="不能超过120个字符" > 
					    </div>
					  </div>
				     
					  
					 </div>
				</form>
    			
		    	
		    		
	    		
		
		</div>
		
		<div class="container" style="padding:0;">
			<div class="olexon-prod-buy-btn">
			<p class="clearfix">
				<b class="left">
					<span class="mr10" style="padding-top:10px;">总金额：<b>￥<b class="cart-prod-price" id="total0">288.00元</b></b></span>
				</b>
				<a href="#" class="right btn-buy" id="add_order_btn">提交订单</a>
			</p>
		</div>
		</div>
		
		<div style="display: none;">
 <script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?5daa65529d285385308e99c1eaa6eebf";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
	
</div>  

	<script>
		$(function(){
			var isColorPic = false;
			var zid = '${id}';

			if(!zid){
				zid = 1;
			}
			
			var gzid = '${param.gzid}';
			if(gzid){
				$("#host_id").val(window.location.host+","+gzid+","); 
			}else{
				$("#host_id").val(window.location.host);
			}
			
			$("#goodsId").val(zid);
			//设置商品详细信息
			  jQuery.ajax({
					type : 'Get',
					contentType : 'application/json',
					url : '${ctx}/goods/get.do',
					async:false,
					data : {
						id : zid,
					},
					dataType : 'json',
					success : function(data) {
						if(data.result){
							var obj = data.obj;
							
							//设置商品基本信息
							var goods = obj.goods;
							//$(".shop-box .shopinfo").html(goods.title);
							$("#info_id").html(goods.title); 
							$("#info_info_id").val(goods.title);  
							$("#now_price_id").html("￥"+goods.nowPrice+".00元"); 
							$("#total0").html(goods.nowPrice+".00元");
							 
							//设置颜色信息
							var colorList = obj.colorList;
							
							if(colorList){
								if(colorList[0] && colorList[0].pic){
									isColorPic = true;
								}
								for(var j = 0;j<colorList.length;j++){
									var color = colorList[j];
									//颜色显示图片
									if(isColorPic){
										var colorModel = $("#color_img_model_id").clone();
										colorModel.find(".color-img").data("id",color.id).data("pic",color.pic).attr("title",color.color).attr("src",_ctx+"/upload/downloadCompress.do?fileName="+color.pic).data("color",color.color);
										colorModel.show();
										$("#color_div_id").append(colorModel);
									//颜色显示文字
									}else{
										var colorModel = $("#color_model_id").clone();
										colorModel.find("button").html(color.color).data("id",color.id).data("pic",color.pic).data("color",color.color);
										colorModel.show();
										$("#color_div_id").append(colorModel);
									}
									 
								}
								
								
							}
							
							//设置尺码信息
							var sizeList = obj.sizeList;
							if(sizeList){
								for(var k = 0 ;k<sizeList.length;k++){
									var size = sizeList[k];
									var sizeModel = $("#size_model_id").clone();
									sizeModel.find("button").html(size.size).data("id",size.id).data("size",size.size);	
									sizeModel.show();
									$("#size_div_id").append(sizeModel);
								}
								
								
							}
						} 
						
					}
			  });
			
			
			var valid = new jValidation.Validation('addr_form', {
				immediate : true
				 
			});
			
			jQuery.ajax({
				type : 'Get',
				contentType : 'application/json',
				url : '${ctx}/address/getAll.do',
				dataType : 'json',
				async:false,
				success : function(data) {
					if (data.result) {
						var provinceList = data.obj;
						var proHtml = '<option value="">请选择</option>';
						for(var i = 0;i<provinceList.length;i++){
							var item = provinceList[i];
							proHtml = proHtml +'<option value="'+item.code+"|"+item.name+'">'+item.name+'</option>';
						}
						$("#province_sel").html(proHtml);
					} else {
						
					}
				},
				error : function(data) {
					 
				}
			});
			
			$("#province_sel").change(function(){
				var provincecode = $(this).val().split("|")[0];
				jQuery.ajax({
					type : 'Get',
					contentType : 'application/json',
					url : '${ctx}/address/getByProvincecode.do',
					dataType : 'json',
					async:false,
					data:{
						provincecode:provincecode
					},
					success : function(data) {
						if (data.result) {
							var cityList = data.obj;
							var proHtml = '<option value="">请选择</option>';
							for(var i = 0;i<cityList.length;i++){
								var item = cityList[i];
								proHtml = proHtml +'<option value="'+item.code+"|"+item.name+'">'+item.name+'</option>';
							}
							$("#city_sel").html(proHtml);
						} else {
							
						}
					},
					error : function(data) {
						 
					}
				});
			});
			
			$("#city_sel").change(function(){
				var citycode = $(this).val().split("|")[0];
				jQuery.ajax({
					type : 'Get',
					contentType : 'application/json',
					url : '${ctx}/address/getByCitycode.do',
					dataType : 'json',
					data:{
						citycode:citycode
					},
					async:false,
					success : function(data) {
						if (data.result) {
							var cityList = data.obj;
							var proHtml = '<option value="">请选择</option>';
							for(var i = 0;i<cityList.length;i++){
								var item = cityList[i];
								proHtml = proHtml +'<option value="'+item.code+"|"+item.name+'">'+item.name+'</option>';
							}
							$("#area_sel").html(proHtml);
						} else {
							
						}
					},
					error : function(data) {
						 
					}
				});
				
			});
			
			//绑定颜色按钮
			$("#color_div_id").on("click",".color-button,.color-img",function(){
				
				if($(this).hasClass("current")){
					$(this).removeClass("current"); 
					//隐藏选中的钩钩
					$(this).closest(".btn-group-sm").find(".pordIxzj").hide(); 
					$("#size_div_id button").each(function(){
						$(this).prop("disabled",false).removeClass("not");
					});
				}else{
					//移除原来选择颜色
					$("#color_div_id .current").closest(".btn-group-sm").find(".pordIxzj").hide();
					$("#color_div_id .current").removeClass("current");
					
					$(this).addClass("current");
					//显示选中的钩钩
					$(this).closest(".btn-group-sm").find(".pordIxzj").show();
					
					var	colorId = $(this).data("id");
							
					jQuery.ajax({
						type : 'Get',
						contentType : 'application/json',
						url : '${ctx}/goods/getColorSizeItemListByColorId.do',
						data : {
							colorId:colorId
						},
						dataType : 'json',
						async:false,
						success : function(data) {
							if(data.result){
								var colorSizeItemList = data.obj;
								var sizeIds = [];
								if(colorSizeItemList){
									for(var i = 0;i<colorSizeItemList.length;i++){
										var sizeId = colorSizeItemList[i].sizeId;
										sizeIds.push(sizeId);
									}
								}
								
								$("#size_div_id button").each(function(){
									var id = $(this).data("id");
									if(jQuery.inArray( id, sizeIds) == -1){
										$(this).addClass("not").prop("disabled",true);
									}else{
										$(this).prop("disabled",false).removeClass("not");
									}
								});
							}
						}
					});
					
				}
				return false; 
				
			});
			
			//绑定尺寸按钮
			var isCalNotDiv = false;
			$("#size_div_id").on("click","button",function(){
				//计算颜色图片遮罩宽度
				if(isColorPic && !isCalNotDiv){
					$("#color_img_model_id .color-img").each(function(){
							$(this).parent().find(".not-div").css("width",$(this).outerWidth());	
					}); 
					isCalNotDiv = true;
				}
						
				if($(this).hasClass("current")){
					$(this).removeClass("current");
					//隐藏选中的钩钩
					$(this).parent().find(".pordIxzj").hide(); 
					//图片颜色
					if(isColorPic){
						$("#color_div_id .color-img").each(function(){
							$(this).parent().find(".not-div").hide();
							$(this).removeClass("not-img");
						});
					//文字颜色
					}else{
						$("#color_div_id button").each(function(){
							$(this).prop("disabled",false).removeClass("not");
						});
					}
					
				}else{
					//移除原来选择颜色
					$("#size_div_id .current").parent().find(".pordIxzj").hide();
					$("#size_div_id .current").removeClass("current");
					$(this).addClass("current");
					//显示红色钩钩
					$(this).parent().find(".pordIxzj").show();
					var sizeId = $(this).data("id");
					jQuery.ajax({
						type : 'Get',
						contentType : 'application/json',
						url : '${ctx}/goods/getColorSizeItemListBySizeId.do',
						data : {
							sizeId:sizeId
						},
						async:false,
						dataType : 'json',
						success : function(data) {
							if(data.result){
								var colorSizeItemList = data.obj;
								var colorIds = [];
								if(colorSizeItemList){
									for(var i = 0;i<colorSizeItemList.length;i++){
										var colorId = colorSizeItemList[i].colorId;
										colorIds.push(colorId);
									}
								}
								//图片颜色
								if(isColorPic){
									$("#color_div_id .color-img").each(function(){
										var id = $(this).data("id");
										if(jQuery.inArray( id, colorIds) == -1){
											$(this).parent().find(".not-div").show();
											$(this).addClass("not-img");
										}else{
											$(this).parent().find(".not-div").hide();
											$(this).removeClass("not-img");
										}
									});
								
								//文字颜色
								}else{
									$("#color_div_id button").each(function(){
										var id = $(this).data("id");
										if(jQuery.inArray( id, colorIds) == -1){
											$(this).addClass("not").prop("disabled",true);
										}else{
											$(this).prop("disabled",false).removeClass("not");
										}
									});
									
								}
								
							}
						}
					});
				}
				
			}); 
			
			//提交订单按钮
			$("#add_order_btn").click(function(){
				var colorBtn = $("#color_div_id .current");
				var sizeBtn =  $("#size_div_id .current");
				if(colorBtn.size() ==0){
					alert("请选择颜色！");
					return false;
				}
				
				if(sizeBtn.size() ==0){
					alert("请选择尺码！");
					return false;
				}
				if(!valid.validate()){
					return false;
				}
				var color = colorBtn.data("color");
				$("#color_id").val(color);
				var size =  sizeBtn.data("size");  
				$("#size_id").val(size);
				var postData = $("#addr_form").serialize();  
				$.ajax({
					type : "POST",
					url : "${ctx}/order/addDpShop.do", 
					data : postData,
					dataType : "json",
					success : function(data) {
						if (data.result) { 
							alert("尊敬的用户，您已下单成功，我们会尽快为您安排发货，为了让用户更省心、放心、我们订单统一采用货到付款方式，到时您亲自验货认为鞋子没问题后再付款给快递人员即可！");
							//window.location.href="${ctx}/detailGoodsD/"+zid;
							window.location.href="${ctx}/";
						} else {
							alert(data.errorMsg);
						}
					}, 
					error : function(data) {
						alert("系统繁忙，请您稍后再试！");
					}
				});	
				return false;
			});
		});
	</script>
	</body>

